<template>
  <div>
    <div
      class="college-list"
      v-for="(item, index) in localCollegeList"
      :key="index"
    >
      <div class="display-flex flex-between">
        <div>
          <img class="icon-size-24" src="@/assets/images/ic_xdnxy.png" />
          <span class="margin-left-10">{{ item.collegeName }}</span>
        </div>
        <div class="display-flex flex-between align-items-center">
          <div class="course-type display-flex flex-between align-items-center">
            <span
              class="font-size-14 text-center cursor-pointer"
              :class="
                item.isAll ? 'active-course bg-0F63ED color-fff' : 'nor-course'
              "
              @click="handleSwitchAll(index, item.isAll)"
              >全部</span
            >
            <span
              :class="
                !item.isAll ? 'active-course bg-0F63ED color-fff' : 'nor-course'
              "
              class="cursor-pointer font-size-14"
              @click="handleSwitchAll(index, item.isAll)"
              >AI课程</span
            >
          </div>
          <div
            style="margin-left: 24px"
            @click="handleLookMore"
            v-if="showMore"
          >
            <span class="look-all font-size-14 cursor-pointer">查看全部</span>
            <img
              style="margin-left: 4px"
              class="icon-size-16"
              src="@/assets/images/ic_enter_nor.png"
            />
          </div>
        </div>
      </div>
      <div class="course-box">
        <div
          class="course-list bg-fff cursor-pointer"
          v-for="(item1, index1) in item.courseList"
          :key="index1"
          @click="handleToDetail"
        >
          <img class="course-img" src="@/assets/images/pic.png" />
          <p class="margin-top-16 color-18191A font-size-16 font-weight-500">
            {{ item1.courseName }}
          </p>
          <p class="margin-top-24">
            <img
              class="icon-size-16 vertical-align-middle"
              src="@/assets/images/ic_teacher.png"
            />
            <span class="color-696E76 font-size-14 margin-left-6">{{
              item1.teacher
            }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const props = defineProps({
  collegeList: {
    type: Array as any,
    default: () => []
  },
  showMore: {
    type: Boolean,
    default: true
  }
})
const localCollegeList = ref([...props.collegeList])
onMounted(() => {})

// 查看更多
const handleLookMore = () => {
  router.push({
    path: '/lookMore'
  })
}

// 去详情页
const handleToDetail = () => {
  router.push({
    path: '/courseDetails'
  })
}

// 切换全部/AI
const handleSwitchAll = (index: any, val: any) => {
  localCollegeList.value[index].isAll = !val
}
</script>

<style lang="scss" scoped>
.college-list {
  margin-bottom: 32px;
}
.course-type {
  width: 108px;
  height: 32px;
  background: #fff;
  border-radius: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 1px solid #e6ebf0;
  .active-course {
    display: inline-block;
    // width: 44px;
    height: 24px;
    padding: 0px 4px;
    box-sizing: border-box;
    border-radius: 17px;
  }
  .nor-course {
    font-family:
      PingFang SC,
      PingFang SC;
    display: inline-block;
    padding: 0px 8px;
    box-sizing: border-box;
    color: #696e76;
  }
  .look-all {
    font-family:
      PingFang SC,
      PingFang SC;
    color: #2f3133;
  }
}
.course-box {
  overflow: hidden;
  margin-top: 16px;
  .course-list {
    width: calc((100% - 72px) / 4);
    height: 262px;
    border-radius: 12px;
    padding: 16px 16px 19px;
    box-sizing: border-box;
    border: 1px solid #e6ebf0;
    float: left;
    margin-right: 24px;
    margin-bottom: 24px;
    .course-img {
      width: 280px;
      height: 146px;
      border-radius: 6px;
      border: 1px solid #696e76;
    }
  }
  .course-list:nth-child(4n) {
    margin-right: 0;
  }
  .course-list:hover {
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.1);
  }
}
.color-18191A {
  color: #18191a;
}
.color-696E76 {
  color: #696e76;
}
.margin-top-24 {
  margin-top: 24px;
}
</style>
